<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="__LAYUI__/css/layui.css" rel="stylesheet">
    <link href="/static/wangeditor/style.css" rel="stylesheet" />

    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100;
            /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }

        .container {
            display: flex;
            justify-content: start;
        }

        .image-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            color: #ccc;
            cursor: pointer;
            position: relative;
            margin-right: 20px;
        }

        .image-box img {
            max-width: 100%;
            max-height: 100%;
        }

        .image-box .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            border: none;
            padding: 2px;
            cursor: pointer;
            display: none;
        }

        /* 移动端布局 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                /* 垂直排列 */
                align-items: flex-start;
                /* 左对齐 */
            }

            .image-box {
                margin-right: 0;
                margin-top: 20px;
                /* 移除右侧间距 */
            }
        }

        .layui-disabled,
        .layui-disabled:hover {
            color: #cccccc !important;
            cursor: not-allowed !important;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <form class="layui-form  layui-padding-3" action="" style="background-color: #fff;">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">隐藏内容</label>
                <div class="layui-input-block">
                    <textarea placeholder="文章类型为默认可忽略" class="layui-textarea" name="hide_content"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1" selected>默认</option>
                        <option value="2">积分</option>
                        <option value="3">回复</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                    <select name="cate_id">
                        <option value="">请选择分类</option>
                        {foreach $cate.data as $k => $v}
                        <option value="{$v.id}" {$v.pid==0 ? 'disabled' : '' }>{$v.cate_name}</option>
                        {/foreach}

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">积分</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="number" name="score" placeholder="" autocomplete="off" class="layui-input" min="0"
                            step="1" lay-affix="number" value="0">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-filter="aihao">
                        <option value="0">待审核</option>
                        <option value="1" selected>正常</option>
                        <option value="2">锁定</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否置顶</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_top" lay-skin="switch" lay-filter="switchTest" title="开启|关闭">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否加精</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_hot" lay-skin="switch" lay-filter="switchTest" title="开启|关闭">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即添加</button>
                </div>
            </div>
        </form>
    </div>


    <script src="__LAYUI__/layui.js"></script>
    <script src="/static/wangeditor/index.js"></script>
    <script>
        const { createEditor, createToolbar } = window.wangEditor


        const editorConfig = {
            placeholder: '请输入文章内容',
            onChange(editor) {
                const html = editor.getHtml()
                console.log('editor content', html)
                // 也可以同步到 <textarea>
            },
            'MENU_CONF': {
                'uploadImage': {
                    server: '/admin/article/uploadImg',
                    fieldName: 'images'
                }
            }
        }
        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {
            'excludeKeys': ['emotion', 'group-video']
        }


        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
        /*  const curToolbarConfig = toolbar.getConfig()
         console.log(curToolbarConfig.toolbarKeys) */ // 当前菜单排序和分组
    </script>
    <script>
        layui.use(function () {
            var form = layui.form;
            var layer = layui.layer;
            $ = layui.$;
            // 提交事件
            form.on('submit(demo1)', function (data) {
                const field = data.field; // 获取表单字段值
                field.content = editor.getHtml()
                field.is_hot = field.is_hot == 'on' ? 1 : 0
                field.is_top = field.is_top == 'on' ? 1 : 0
                $.post('/admin/article/doAdd', field, (res) => {
                    if (res.code == 200) {
                        layer.msg('添加成功')
                    } else {
                        layer.msg(res.msg)
                    }
                })
                return false;
            });


        });


    </script>
    </div>
</body>

</html>